<template>
   <div class="singer" ref="singer">
       <Listview :data="singerList" @select="selectItem"></Listview>
       <router-view> </router-view>
   </div>

</template>

<script>
    import { getSingerList } from 'api/singer'
    import {ERR_OK} from 'api/config'
    import  Singer from 'common/js/singer'
    import Listview from 'base/listview/listview'
    import { mapMutations } from 'vuex'
    const HOT_NAME = '热门'
    const HOT_SINGER_LEN = 10;
    export default{
        data(){
            return{
                singerList : []
            }
        },
        components:{
            Listview,
        },
        created(){
            this._getSingerList();
        },
        methods: {
            ...mapMutations({
                setSinger : 'SET_SINGER'
            }),
            selectItem(singer){
                // console.log(singer);
                this.$router.push({
                    path : `/singer/${singer.id}`
                })
                this.setSinger(singer);
            },
            _getSingerList(){
                getSingerList().then((res)=>{
                    if(res.code === ERR_OK){
                        // console.log(this._normalizeSinger(res.data.list));
                        this.singerList = this._normalizeSinger(res.data.list);
                    }
                })
            },
            _normalizeSinger(list){
               
               let map = {
                    hot:{
                        title : HOT_NAME,
                        items :[]
                    }
                   
               }

               list.forEach((item,index)=>{
                    if(index < HOT_SINGER_LEN){
                       map.hot.items.push(
                        new Singer({
                           name : item.Fsinger_name,
                           id : item.Fsinger_mid,
                       }))
                    }
                    const key = item.Findex;
                    if(!map[key]){
                        map[key] = {
                            title : key,
                            items :[]
                        }
                    }

                    map[key].items.push(
                        new Singer({
                           name : item.Fsinger_name,
                           id : item.Fsinger_mid,
                       }))
               })

                //    因为对象是没顺序的，所以序列化map对象
                let ret = [];
                let hot = [];
                for(let key in map){
                    let val = map[key];
                    if(val.title.match(/[a-zA-Z]/)){
                        ret.push(val)
                    }else if(val.title === HOT_NAME){
                        hot.push(val)
                    }
                }

                ret.sort((a,b)=>{
                    return a.title.charCodeAt() - b.title.charCodeAt();
                })
                return hot.concat(ret);
            },
        }

    }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .singer
    position: fixed
    top: 88px
    bottom: 0
    width: 100%
</style>

